<template>
  <view class="evoke">
    <view class="evoke-bg"></view>
    <view class="evoke-body">
      <view class="icon-close" @click="handleClose">
        <x-icon name="icon-003" color="#ffffff" size="45"/>
      </view>

      <view v-if="carouselList && carouselList.length > 0" class="marquee">
        <x-carousel :list="carouselList" type="plain" :max="1" transparent />
      </view>

      <view class="content">
        <view class="product" v-for="(item,index) in productList" :key="index" @click="naviTo(item)">
          <view class="product-pic">
            <x-image :src="item.mainPic[0]" />
          </view>
          <view class="product-info">
            <view class="product-name">
              <view class="name">{{ item.productTitle }}</view>
              <view v-if="item.pageSales > 100" class="product-sales">热卖{{ item.pageSales }}件</view>
            </view>
            <view class="product-price-box">
              <view class="product-price">
                <view class="product-price-now">￥{{item.nowPrice}}</view>
                <view class="product-price-old">￥{{item.purchasePrice}}</view>
              </view>
              <view class="product-reduction">
                <x-image src="/assets/images/icon-reduction.png" class="icon-reduction" />
                <text>已减{{item.reduction}}元</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XCarousel from '@/components/x-carousel';
export default {
  name: 'PEvoke',
  components: {
    XImage,
    XIcon,
    XCarousel
  },
  props: {
    query: {
      type: Object,
      default: () => ({})
    },
    carouselList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      productList: []
    };
  },
  computed: {
    adParams() {
      const { gdt_vid, qq_ac_id, qq_ag_id, clickid, adid, acode, callback, aid, cid, ksUnitId, ksSiteAccountId } = this.query || {};
      return {
        gdt_vid,
        qq_ac_id,
        qq_ag_id,
        clickid,
        adid,
        acode,
        callback,
        aid,
        cid,
        ksUnitId,
        ksSiteAccountId
      };
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$http({
        url: '/product/page/goods/recommend',
        data: {
          pageId: this.query.pageId,
          pageSize: 3
        }
      }).then(res => {
        this.productList = res.data?.map(item => {
          const nowPrice = this.getNowPrice(item);
          return {
            ...item,
            nowPrice,
            reduction: this.$tools.formatNumber(item.purchasePrice - nowPrice)
          };
        }) || [];
      });
    },
    handleClose() {
      this.$emit('close');
    },
    naviTo(item) {
      console.log(this.adParams, item, 2222222)
      const params = {
        pageId: item.pageId,
        source: 1032,
        td: this.query.td,
        ...this.adParams
      };
      const query = this.$tools.object2param(params);
      this.handleClose();
      console.log(`/pages/advertising/index?${query}`, 333333)
      uni.redirectTo({
        url: `/pages/advertising/index?${query}`
      });
    },
    getNowPrice(row) {
      let price = row.groupPrice;

      if (row.subsidyAmount) {
        price = row.groupPrice - row.subsidyAmount;
      } else {
        this.getCouponList(row);
      }

      price = this.$tools.formatNumber(price);
      return price <= 0 ? 0.01 : price;
    },
    async getCouponList(row) {
      const params = {
        storeId: row.storeId,
        productId: row.productId,
        pageId: row.pageId
      };
      const { data } = await this.$http({
        login: true,
        url: '/marketing/user/coupon/list/for/product',
        method: 'get',
        report: true,
        error: false,
        data: params
      });
      const couponList = data || [];

      const coupon = this.$tools.matchBestCoupon(couponList, row.groupPrice);
      const couponAmount = coupon?.couponAmount;
      if (couponAmount) {
        const currentProduct = this.productList.find(item => item.pageId === row.pageId);
        currentProduct.nowPrice = this.$tools.formatNumber(row.groupPrice - couponAmount);
        currentProduct.reduction = this.$tools.formatNumber(row.purchasePrice - currentProduct.nowPrice);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.evoke{
  position: fixed;
  inset: 0;
  z-index: 11;
}
.evoke-bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.evoke-body{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 686px;
  height: 896px;
  transform: translate(-50%, -50%);
  background: cdn('/images/bg-evoke.png') no-repeat;
  background-size: contain;

  .content{
    margin: 214px 24px 0;
    border-radius: 30px;
    background: #FFF7F8;
    padding: 20px 24px;
  }

  .icon-close{
    position: absolute;
    top: -60px;
    right: 0;
  }
  .marquee{
    position: absolute;
    top: 0;
    left: 260px;
    background: rgba(214, 138, 134, 0.9);
    border-radius: 25px;
    height: 50rpx;
    overflow: hidden;
  }
}

.product{
  display: flex;
  padding: 10px 0;
  .product-pic{
    width: 184px;
    height: 184px;
    background: #F5F5F5;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 20px;
  }
  .product-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .product-name{
      .name{
        font-size: 30px;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .product-sales{
      font-size: 24px;
      color: #6C6C6C;
    }
    .product-price-box{
      background: cdn('/images/icon-buy.png') no-repeat right;
      background-size: contain;
      background-color: #FFE7E7;
      padding: 10px;
      border-radius: 10px;
      color: #FF1C49;
      .product-price{
        display: flex;
        align-items: baseline;
        .product-price-now{
          font-size: 38px;
          &:first-letter{
            font-size: 24px;
          }
        }
        .product-price-old{
          font-size: 24px;
          color: #969696;
          text-decoration: line-through;
        }
      }
      .product-reduction{
        display: flex;
        align-items: center;
        .icon-reduction{
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }
        text{
          font-size: 20px;
        }
      }
    }
  }
}
</style>
